﻿@{
    ViewBag.Title = "Order";
}
    <div id="pageBox">
        <div class="alert alert-dismissible bg-info">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4><i class="icon fa fa-warning"></i> Alert!</h4>
            This is a level 3 menu. You can only set level 3, and set your permissions under level 3.
            Note that the added level 1 or 2 will be the menu displayed on the left.
            Please add the permission groups that need to be controlled under the menu.
        </div>
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Operation List</h3>
            </div>
            <div class="box-body">
                <div class="tree-view well">
                    <ul id="tree-ul">
                    </ul>

                </div>
            </div>
        </div>
        <div class="modal fade" id="modal-add">
            <input id="optype" value="0" type="hidden" />
            <input id="menu_id" name="menu_id" value="" type="hidden" />
            <input id="level" name="level" value="" type="hidden" />
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title">Add Node</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Name</label>
                            <input id="menu_name" type="text" class="form-control" placeholder="Enter Name...">
                        </div>
                        <div class="form-group" style="display:none;" id="iconDiv">
                            <label>Icon class</label>
                            <input id="icon" type="text" class="form-control" placeholder="">
                        </div>
                        <div class="form-group topSelect">
                            <label>IsTopClickMenu</label>
                            <select id="isTopSelect" class="form-control" change="$this.isTopSelect()">
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Chose Action</label>
                            <select id="action-list" class="form-control select2" placeholder="Please chose actons" style="width: 100%;">
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" v-on:click="save()">Save changes</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </div>


@section styles
        {
    <link rel="stylesheet" href="~/Content/libs/select2/dist/css/select2.min.css" />
}
@section scripts{
    <script src="~/Content/libs/select2/dist/js/select2.full.min.js" type="text/javascript"></script>
    <script type="text/javascript">
            var MyVue = new Vue({
                el: "#pageBox",
                data: {
                    actions:[]
                },
                mounted: function () {
                    $this = this;
                    $this.loadOperation();
                    $this.loadAllAction();
                    $this.modal();
                   
                },
                created: function () {

                },
                methods: {
                    loadAllAction: function ()
                    {
                        admin.ajax({
                                url: '@Url.Action("GetALLActions")',
                                data: '',
                                loading: true,
                                success: function (r) {
                                    if (r.status == 1) {
                                        $this.actions = r.data;
                                    }
                                }
                    });
                    },
                    intTree: function () {
                        $this = this;
                        //总结点
                        var html = "<li>";
                        html += "<span><i class='fa fa-minus-circle'></i>ALL<em class='fa fa-edit pull-right'></em>" + $this.btn(0, 0) + "</span>";
                        html += "<ul>"
                        $($this.operations).each(function (idx, obj) {
                            html += "<li>";

                            if (obj.Child.length > 0) {
                                html += "<span><i class='fa fa-minus-circle'></i>" + obj.Name + "<em class='fa fa-edit pull-right'></em>" + $this.btn(obj.Id, 1) + "</span><a href=''>Level 1 Menu</a>";
                                html += "<ul>";
                                //二级
                                $(obj.Child).each(function (idx2, obj2) {
                                    html += "<li>";

                                    //三级,默认不展开
                                    if (obj2.Child.length > 0) {
                                        html += "<span><i class='fa fa-plus-circle'> </i>" + obj2.Name + $this.btn(obj2.Id, 2) + "<em class='fa fa-edit pull-right'></em></span> <a href=''>Level 2 Menu</a>";
                                        html += "<ul style='display:none'>";
                                        $(obj2.Child).each(function (idx3, obj3) {
                                            html += "<li>";
                                            html += "<span><i class='fa fa-leaf'> </i>" + obj3.Name + $this.btn(obj3.Id, 3) + "<em class='fa fa-edit pull-right'></em></span> <a href=''>right</a>";
                                            html += "</li>"
                                        });
                                        html += "</ul>";
                                    }
                                    else {
                                        html += "<span><i class='fa fa-leaf'> </i>" + obj2.Name + $this.btn(obj2.Id, 2) + "<em class='fa fa-edit pull-right'></em></span> <a href=''>Level 2 Menu</a>";
                                    }
                                    html += "</li>"
                                });
                                html += "</ul>";
                            }
                            else {
                                html += "<span><i class='fa fa-leaf'></i> " + obj.Name + $this.btn(obj.Id, 1) + "<em class='fa fa-edit pull-right'></em></span> <a href=''>Level 1 Menu</a>";
                            }
                            html += "</li>";

                        });
                        html += "</ul></li>";
                        $("#tree-ul").html("").append(html);
                        $this.runJs();
                    },
                    runJs: function () {
                        $('.tree-view li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');

                        $('.tree-view li.parent_li > span i').unbind('click').bind('click', function (e) {
                            var child = $(this).parent().parent().find(">ul");
                            if (child.is(":hidden")) {
                                child.show();
                                $(this).parent().attr('title', 'Expand this branch').find('i').attr("class", "").addClass('fa fa-minus-circle');
                            }
                            else {
                                child.hide();
                                $(this).parent().attr('title', 'Collapse this branch').find('i').attr("class", "").addClass('fa fa-plus-circle');
                            }
                            e.stopPropagation();
                        });
                        $(".tree-view li span").hover(function () {
                            $(".btn-group").hide();
                            $(".tree-view em").hide();
                            $(this).find(">.btn-group").show();
                            $(this).find(">em").show();
                        });
                    },
                    btn: function (id, level) {
                        $this = this;
                        var html = "<div class='btn-group' style='display:none;'>";
                        if (level> 0&&level<3) {
                            html +=
                                "<button onclick=$this.btnClick(" + id + ",0," + level + ") type='button' class='btn btn-xs btn-info' data-toggle='modal' data-target='#modal-add'>Add</button>" +
                                "<button onclick=$this.btnClick(" + id + ",1," + level + ") type='button' class='btn btn-xs btn-warning' data-toggle='modal' data-target='#modal-add'>Modify</button>" +
                                "<button onclick=$this.deleteMenu(" + id + "," + level + ") type='button' class='btn btn-xs btn-danger'>Delete</button>";
                        }
                        else if (level==0) {
                            html +=
                                "<button onclick=$this.btnClick(0,0,0) type='button' class='btn btn-xs btn-info' data-toggle='modal' data-target='#modal-add'>Add</button>" +
                                "<button type='button' class='btn btn-xs btn-warning disabled'>Modify</button>" +
                                "<button type='button' class='btn btn-xs btn-danger disabled'>Delete</button>";
                        }
                        else {
                            html +=
                                "<button type='button' class='btn btn-xs btn-info disabled'>Add</button>" +
                                "<button onclick=$this.btnClick(" + id + ",1," + level + ") type='button' class='btn btn-xs btn-warning' data-toggle='modal' data-target='#modal-add'>Modify</button>" +
                                "<button onclick=$this.deleteMenu(" + id + "," + level + ") type='button' class='btn btn-xs btn-danger'>Delete</button>";
                        }

                        html += "</div >";
                        return html;
                    },
                    btnClick: function (id,type,level)
                    {
                        $("#menu_id").val(id);
                        $("#optype").val(type);
                        $("#level").val(level);
                        if (id == 0 && type == 1) {
                            admin.alert("The node is a total node that cannot be edited!", "Warning");                            
                            return;
                        }
                       
                    },
                    deleteMenu: function (id) {                       
                        admin.confirm("Would you like to delete it?", function () {
                            console.log("deleteId");
                        });
                    },
                    modal: function () {
                        $this = this;
                        $("#modal-add").on("show.bs.modal", function (e) {
                            var type = $("#optype").val();
                            var menu_id = $("#menu_id").val();
                            var level = $("#level").val();   

                            //初始化
                            $("#isTopSelect").attr("disabled", true);
                            $("#iconDiv").hide();
                            $("#isTopSelect").val(0);


                            if (type == 1 && menu_id > 0)//修改
                            {
                                $(".modal-title").text("Edit Node");
                                //获取数据
                                admin.ajax({
                                    url: '@Url.Action("GetRightById")',
                                    data: { id: menu_id },
                                    loading: true,
                                    success: function (r) {
                                        var multiple = true;
                                        var allowClear = true;
                                        if (r.status == 1) {
                                            if (level == 1 || level == 2) {
                                                multiple = false;
                                                allowClear = true;
                                            }
                                            var op = r.data;
                                            $("#menu_name").val(op.Name);
                                            $("#isTopSelect").val(op.IsTopClickMenu);
                                            if (op.ParentId == 0) {
                                                $("#isTopSelect").attr("disabled", false);
                                                $("#iconDiv").show();
                                                $("#icon").val(op.Icon);
                                            }

                                            var select = $('#action-list').select2({
                                                multiple: multiple,
                                                placeholder: 'Please chose actions',
                                                allowClear: allowClear,
                                                data: $this.actions
                                            });
                                            if (level == 1 || level == 2) {
                                                select.val(op.Right).trigger('change');
                                            }
                                            else {
                                                select.val(op.Right.split(',')).trigger('change');
                                            }

                                        }
                                    }
                                });
                            }
                            else if (type == 0)//添加
                            {
                                var multiple = true, allowClear = true;
                                if (level == 0) {
                                    $("#isTopSelect").attr("disabled", false);
                                }
                                if (level == 0 || level == 1) {
                                    multiple = false;
                                    allowClear = true;
                                }
                                $(".modal-title").text("Add Node");
                                var select = $('#action-list').select2({
                                    multiple: multiple,
                                    placeholder: 'Please chose actions',
                                    allowClear: allowClear,
                                    data: $this.actions
                                });
                                $("#menu_name").val("");
                                select.val("").trigger('change');
                            }                            
                            else {
                                admin.alert("The id is error!", "Warning");
                                return;
                            }                            
                        });
                    },
                    save: function () {
                        var type = $("#optype").val();
                        var id = $("#menu_id").val();
                        var right = encodeURIComponent($("#action-list").val());
                        var name = $("#menu_name").val();
                        var isTopClick = $("#isTopSelect").val();
                        var ParentId = 0;
                        var icon = $("#icon").val();
                        if (type == 0)//新增
                        {
                           
                            ParentId = id;
                            id = 0;
                        }
                        if (name == '') {
                            admin.alert("Name required","Warning");
                            return;
                        }
                        admin.ajax({
                            type: "post",
                            url: '@Url.Action("Save")',
                            data: { id: id,right:right,name:name,isTopClick:isTopClick,ParentId: ParentId,icon:icon},
                            loading: true,
                            success: function (r) {
                                if (r.status == 1) {
                                    admin.alert("Successful operation", "Success");
                                    $this.loadOperation();
                                    admin.loadMenu("@Url.Action("Menu")", $("#web_menu"));
                                    $("#modal-add").modal("hide");
                                }
                                else {
                                     admin.alert("operation failed", "Error");
                                }
                            }
                        });
                       
                    },
                    loadOperation: function () {
                        $this = this;
                        admin.ajax({
                            url: '@Url.Action("GetData")',
                            data: '',
                            loading: true,
                            success: function (r) {
                                if (r.status == 1) {
                                    $this.operations = r.data;
                                    $this.intTree();
                                }
                                else {
                                    admin.alert("load operations failed", "Error");
                                }
                            }
                        });

                    }
                }
            });
    </script>
}




